<template>
	<cl-dialog
		title="投诉/建议详情"
		width="500px"
		:props="{
			top: '5vh',
			'append-to-body': true,
			'close-on-click-modal': false,
			'close-on-press-escape': false
		}"
		:visible.sync="visible"
		@close="close"
	>
		<div class="container">
			<el-form label-width="120px">
				<el-form-item label="状态：" class="status_tips"
					><span>{{
						detail.status == 1 ? "已处理" : detail.status == 2 ? "跟进中" : "未处理"
					}}</span></el-form-item
				>
				<!-- <el-form-item label="跟进记录：" v-if="detail.status == 1">
					<div>{{ detail.check_content }}</div>
					<div style="color: #999; margin-bottom: 10px">
						({{ detail.check_user_name }}:{{ detail.check_time }})
					</div>
					<template v-if="detail.check_images">
						<el-image
							class="img-item"
							v-for="(item, index) in detail.check_images"
							:key="index"
							:src="item"
							:preview-src-list="detail.check_images"
							:z-index="3000"
							fit="cover"
						/>
					</template>
				</el-form-item> -->
				<el-form-item label="提交时间：">{{ detail.created_at }}</el-form-item>
				<el-form-item label="类型：">{{
					detail.type | constFilter("ADVICE_TYPE")
				}}</el-form-item>
				<el-form-item label="凭证：">
					<template v-if="detail.img">
						<el-image
							class="img-item"
							v-for="(item, index) in detail.img"
							:key="index"
							:src="`${item}?x-oss-process=image/resize,limit_0,m_fill,w_100,h_100`"
							:preview-src-list="detail.img"
							:z-index="3000"
							fit="cover"
						/>
					</template>
					<span v-else>-</span>
				</el-form-item>
				<el-form-item label="内容：">{{ detail.content }}</el-form-item>
				<el-form-item label="提交人：">{{ detail.user_name }}</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
	export default {
		name: "advice-info",
		data() {
			return {
				visible: false,
				detail: {}
			};
		},
		methods: {
			open(data = {}) {
				console.log(data);
				this.detail = data;
				this.getComplchecklog();
				this.visible = true;
			},
			close() {
				this.visible = false;
			},
			async getComplchecklog() {
				const { id } = this.detail;
				const res = await this.$service.aftersale.complchecklog({
					id
				});
				console.log(res);
			},
			isArr(val) {
				if (!Array.isArray(val)) {
					return val.split(",");
				}
				return val;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		max-height: 500px;
		overflow: auto;
	}
	.title_tips {
		::v-deep {
			.el-form-item__label {
				font-weight: bold;
				margin-left: -14px;
			}
		}
	}
	::v-deep .border-top {
		border-top: 1px solid #f7f7f7;
	}
	.status_tips {
		span {
			color: #156DFF;
		}
	}
	.refimage {
		width: 50px;
		height: 50px;
		margin-right: 10px;
		margin-top: 10px;
	}
	::v-deep {
		.el-form-item {
			margin-bottom: 10px !important;
		}
	}
	.mes-list {
		list-style: none;
		padding-top: 6px;
		line-height: normal;
		li {
			color: #909399;
			& + li {
				margin-top: 10px;
			}
			.mes {
				color: #333;
			}
		}
	}
	.img-item {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		+ .img-item {
			// margin-left: 10px;
		}
		&:nth-child(3n + 3) {
			margin-right: 0 !important;
		}
	}
</style>
